import React from "react";
import s from "./index.scss";
import Animate from 'rc-animate';
import { isDrawer } from "actions/common";
import { Login } from "actions/login";

import { connect } from "react-redux";
import {isOverflow} from 'app/utils'
import {Flex} from 'antd-mobile'
import bt1 from 'assets/images/bt1.png'
import bt2 from 'assets/images/bt2.png'
import bt3 from 'assets/images/bt3.png'
import bt4 from 'assets/images/bt4.png'
import bt5 from 'assets/images/bt5.png'
import bt6 from 'assets/images/bt6.png'
import QueueAnim from 'rc-queue-anim'


import { hashHistory, router } from "React-router";
 
  @connect(
    state => ({
      common: state.common,
      login: state.login
    }),
    {
      isDrawer,
      Login
    }
  )
export default class extends  React.Component {

  onSwitch = flag => {
    let { isDrawer } = this.props;
    let { isHide } = this.props.common;
    isDrawer(!isHide);
    isOverflow(!isHide)
  };

  onLink=(url,flag)=>{
    let { isDrawer ,Login } = this.props;
    let { isHide } = this.props.common;
    isDrawer(false);
    isOverflow(false)
    if(flag=='logout'){
      localStorage.removeItem('isLogin')
      localStorage.removeItem('userData')
      Login(false)
    }
    hashHistory.replace(url)
    
  }

 render(){
  let {isHide} = this.props.common
  let {isLogin} = this.props.login
  // if(isHide==true){
  //   $("body,html").css({"overflow":"hidden"});
  // }else{
  //   $("body,html").css({"overflow":"auto"});
  // }
  return (
    <QueueAnim type="bottom" leaveReverse>
     {isHide ? 
     <div show={`${isHide}`} className={`${s.axDrawer} `}  key="a">
     <QueueAnim type="top" leaveReverse >
      <div className={`${s.mask}`} onClick={this.onSwitch} key="a">
      </div>
      <div className={`${s.topBox}`} key="b">
        {isLogin?
        <Flex>
          <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/my')} >
            <img src={bt1}/>
            <span>账户</span>
          </Flex.Item>
          <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/projectList')} >
            <img src={bt2}/>
            <span>投资</span>
          </Flex.Item>
          <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/','logout')} >
            <img src={bt3}/>
            <span>退出</span>
          </Flex.Item>
        </Flex>:<Flex>
          <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/login')} >
            <img src={bt4}/>
            <span>登录</span>
          </Flex.Item>
          <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/register')} >
            <img src={bt5}/>
            <span>注册</span>
          </Flex.Item>
          <Flex.Item className={`${s.item}`} onClick={this.onLink.bind(this,'/')} >
            <img src={bt6}/>
            <span>主页</span>
          </Flex.Item>
        </Flex>}
      </div>
      </QueueAnim>
    </div> : null}
    </QueueAnim>
    
  );
}
};
